<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag_oop</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        body {
            background:#eee;
        }
        #box {
            width:100px;
            height:100px;
            background:pink;
            border:1px #000 solid;
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>
<script type="text/javascript">
    function Drag(id){
        var _this = this;
        this.oDiv = document.querySelector(id);
        this.disX = 0;
        this.disY = 0;
        this.l = 0;
        this.t = 0;
        this.oDiv.onmousedown = function(evt){
            _this.fnDown(evt);
        }
    }
    Drag.prototype.fnMove = function(evt){
        var e = evt || window.event;
        this.l = e.clientX - this.disX;
        this.t = e.clientY - this.disY;
        if(this.l < 0){
            this.l = 0;
        }
        if(this.l > document.documentElement.clientWidth - this.oDiv.offsetWidth){
            this.l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
        }
        if(this.t < 0){
            this.t = 0;
        }
        if(this.t > document.documentElement.clientHeight - this.oDiv.offsetHeight){
            this.t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
        }
        this.oDiv.style.left = this.l + 'px';
        this.oDiv.style.top = this.t + 'px';
    };
    Drag.prototype.fnUp = function(){
        document.onmousemove = null;
    };
    Drag.prototype.fnDown = function(evt){
        var e = evt || window.event;
        this.disX = e.clientX - this.oDiv.offsetLeft;
        this.disY = e.clientY - this.oDiv.offsetTop;
        var _this = this;
        document.onmousemove = function(evt){
            _this.fnMove(evt);
        };
        document.onmouseup = _this.fnUp;
    }
</script>
<script type="text/javascript">
    var drag = new Drag('#box');
</script>